﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/head.jsp"%>
<div class="b_wrap">
	<div class="current">
		<span>当前所在地：</span><a href="/">首页</a> >> <a href="/to_travel_route">旅游路线</a>
		<a href="#">商品详情</a>
	</div>
	<div class="clumn_w clearfix">
		<div class="clumn_l">
			<div class="clumn">
				<div class="clumn_tit t01">餐饮住宿</div>
				<div class="clumn_con">
					<div class="cln_w">
						<p>热门城市</p>
						<div class="cln_c clearfix">
							<a href="#">北京</a> <a href="#">上海</a> <a href="#">厦门</a> <a
								href="#">成都</a> <a href="#">西安</a> <a href="#">黄山</a> <a
								href="#">香港</a> <a href="#">青岛</a> <a href="#">桂林</a> <a
								href="#">深圳</a> <a href="#">三亚</a> <a href="#">杭州</a> <a
								href="#">丽江</a> <a href="#">南京</a> <a href="#">重庆</a> <a
								href="#">苏州</a> <a href="#">张家界</a>
						</div>
					</div>
					<div class="cln_w">
						<p>景点认证</p>
						<div class="cln_c clearfix">
							<a href="#">5A级</a> <a href="#">4A级</a> <a href="#">3A级</a> <a
								href="#">2A级</a>
						</div>
					</div>
					<div class="cln_w">
						<p>热门主题</p>
						<div class="cln_c clearfix">
							<a href="#">温泉</a> <a href="#">古镇</a> <a href="#">摄影</a> <a
								href="#">滑雪</a> <a href="#">海边</a> <a href="#">美食</a> <a
								href="#">登山</a> <a href="#">主题公园</a>
						</div>
					</div>
				</div>
			</div>
			<div class="clumn">
				<div class="clumn_tit t02">
					<span>优惠促销</span><a href="#">更多>></a>
				</div>
				<div class="clumn_con">
					<ul class="clu_ul">
						<li><a href="#">六日黄石公园, 现有女一人，寻女性同游</a></li>
						<li><a href="#">国庆长假，温哥华维多利亚自助游找伴</a></li>
						<li><a href="#">去NewFundland，自助游！ 肯定走！</a></li>
						<li><a href="#">多伦多-温哥华 横跨之旅</a></li>
						<li><a href="#">诚招一女， 已有7人定下去NewFoundland</a></li>
						<li><a href="#">六日黄石公园, 现有女一人，寻女性同游</a></li>
						<li><a href="#">暑期邮轮 特价不断</a></li>
						<li><a href="#">订机票，选银联，超值特惠</a></li>
					</ul>
					<div>
						<center>
							<img src="statics/portal/images/add01.jpg">
						</center>
					</div>
				</div>
			</div>
			<div class="clumn">
				<div class="clumn_tit t03">
					<span>游览历史记录</span><a href="#">更多>></a>
				</div>
				<div class="clumn_con">
					<ul class="clu_ul s_ul">
						<li><a href="#">日本航空·大阪自由行5日 </a><span>¥3152</span></li>
						<li><a href="#">日本航空·名古屋自由行4日 </a><span>¥3129</span></li>
						<li><a href="#">购物·东京涉谷原宿自由行5日</a><span>¥5880</span></li>
						<li><a href="#">日本航空·大阪自由行5日 </a><span>¥3152</span></li>
						<li><a href="#">日本航空·名古屋自由行4日 </a><span>¥3129</span></li>
						<li><a href="#">购物·东京涉谷原宿自由行5日</a><span>¥5880</span></li>
						<li><a href="#">日本航空·大阪自由行5日 </a><span>¥3152</span></li>
						<li><a href="#">日本航空·名古屋自由行4日 </a><span>¥3129</span></li>
						<li><a href="#">购物·东京涉谷原宿自由行5日</a><span>¥5880</span></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="clumn_r">
			<div class="tc_tit" id="trTitle"></div>
			<div class="xq_wrap clearfix">
				<div class="xq_left">
					<img id="titleImg" src="statics/portal/images/big_img01.jpg"
						width=330px height=370px>
				</div>
				<div class="xq_right">
					<div class="xq_detail">
<!-- 						<p id="trNo"></p> -->
						<p id="fromSta"></p>
						<p id="toSta"></p>
						<p id="dateRange"></p>
						<p id="price"></p>
						<p id="duration"></p>
						<p id="sellPoint"></p>
						<input class="demo-input" type="text" name="dateRange"
							placeholder="请选择出发日期" id="checkDateRange" style="width: 280px;"></input>
						<div class="layui-input-block" id="isSoldOut">
							</select>
						</div>
					</div>
					<div class="share">
						<img src="statics/portal/images/sh01.jpg" align="absmiddle">
						分享给朋友： <a href="#"><img src="statics/portal/images/sh02.jpg"
							align="absmiddle"></a> <a href="#"><img
							src="statics/portal/images/sh03.jpg" align="absmiddle"></a> <a
							href="#"><img src="statics/portal/images/sh04.jpg"
							align="absmiddle"></a> <a href="#"><img
							src="statics/portal/images/sh05.jpg" align="absmiddle"></a>
					</div>
					<div class="xq_button">
						<a href="/to_navigation_predefined"><img
							src="statics/portal/images/order_button.jpg"></a>
					</div>
				</div>
			</div>
			<div class="xq_wrap">
				<div class="tab_menu xq_menu">
					<ul class="xq_ul">
						<li class="selected">产品介绍</li>
						<li>注意事项</li>
						<li>重要说明</li>
						<li>用户评论</li>
					</ul>
				</div>
				<div class="tab_box">
					<div class="tab_w" id="trDesc">产品详情</div>
					<div class="hide tab_w">注意事项</div>
					<div class="hide tab_w">重要说明</div>
					<div class="hide tab_w">用户评论</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript"
	src="statics/portal/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		var wweya_li = $("div.tab_menu ul li");
		wweya_li.click(function() {
			$(this).addClass("selected")
				.siblings().removeClass("selected");
			var index = wweya_li.index(this);
			$("div.tab_box > div")
				.eq(index).show(100)
				.siblings().hide();
		}).hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		});
	});
</script>
<script type="text/javascript">
	$(function() {
		var minDate;
		var maxDate;
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//日期范围选择
			laydate.render({
				elem : '#checkDateRange',
				min : minDate,
				max : maxDate
			});
		});

		//查询产品
		ajaxRequestJson("/trevalproject/detail/${cparam}", null, function(data) {
			inData(data.data);
			
		});
		//加载产品详情描述
		ajaxRequestJson("/trevalproject/getDesc/${cparam}", null, function(data) {
			$("#trDesc").html(data.data.trDesc);
		});
		//填充数据方法
		function inData(data) {
			$("#trTitle").text(data.title);
			$("#titleImg").attr("src", data.titleImg);
// 			$("#trNo").text("产品编号：" + data.trId);
			$("#fromSta").text("出发地：" + data.fromSta);
			$("#toSta").text("目的地：" + data.toSta);
			$("#dateRange").text("出团日期：" + data.dateRange);
			$("#price").text("旅游价格：￥" + data.price);
			$("#duration").text("持续时长：" + data.duration + "天");
			$("#sellPoint").text("项目亮点：" + data.sellPoint);
			if(data.peopleNum-data.soldCount==0){
				$("#isSoldOut").html("<p>已售罄</p>");
			}else{
				$("#isSoldOut").html('人数： <select name="num" id="buyNum" lay-filter="aihao" class=""></select>');
				for(var i = 1; i < data.peopleNum-data.soldCount; i++){
					$("#buyNum").append('<option value='+i+'>'+i+'</option>')
				}
			}
			initDateRange(data.dateRange);
			
		}
		//日期范围初始化
		function initDateRange(dateStr) {
			var dateStrArr = dateStr.split('~');
			minDate = dateStrArr[0];
			maxDate = dateStrArr[1];
		}
	});
</script>
<%@ include file="common/foot.jsp"%>
